<template>
  <div class="join_page">
    <!-- 导航 开始 -->
    <!-- <nav-bar title="机构入驻"></nav-bar> -->
    <!-- 导航 end -->

    <div class="banner">
      <img
        src="@/assets/images/my/join_title.png"
        class="title"
        alt="互联网口腔健康平台"
      />
      <img src="@/assets/images/my/join_img.png" class="img" alt="" />
      <img src="@/assets/images/my/join_data.png" class="data" alt="" />
    </div>

    <div class="form_box">
      <div class="form_item">
        <span class="label">机构名称</span>
        <div class="input_box">
          <input
            type="text"
            v-model="form.orgName"
            class="a_input"
            placeholder="请输入机构名称"
          />
        </div>
      </div>
      <div class="form_item" @click="openDialog()">
        <span class="label">所在城市</span>
        <div class="input_box">
          <input
            type="text"
            class="a_input"
            v-model="form.cityName"
            readonly
            placeholder="请选择所在城市"
          />
        </div>
        <!-- <van-icon name="arrow" class="van_icon" /> -->
        <img src="@/assets/images/report/arrow_right.png" class="img" alt="">
      </div>
      <div class="form_item">
        <span class="label">联系人</span>
        <div class="input_box">
          <input
            type="text"
            v-model="form.linkman"
            class="a_input"
            placeholder="请输入联系人"
          />
        </div>
      </div>
      <div class="form_item">
        <span class="label">职位</span>
        <div class="input_box">
          <input
            type="text"
            v-model="form.position"
            class="a_input"
            placeholder="请输入职位"
          />
        </div>
      </div>
      <div class="form_item">
        <span class="label">您的手机号码</span>
        <div class="input_box">
          <input
            type="number"
            v-model="form.phone"
            class="a_input"
            placeholder="请输入您的手机号码"
          />
        </div>
      </div>

      <div class="btn_group">
        <button class="btn" @click="applyEvent">立即提交</button>
      </div>
    </div>

    <!-- 城市 开始 -->
    <van-popup v-model="showDialog" position="bottom">
      <van-picker
        title="所在城市"
        show-toolbar
        :columns="cityJson"
        value-key="name"
        @confirm="onConfirm"
        @cancel="closeDialog"
      />
    </van-popup>
    <!-- 城市 end -->
  </div>
</template>
<script>
import { showToast, deepClone, checkPhone } from "@/utils/utils";
import {
  PLATFORM_TYPE,
  ORGZASSIGNED_ASSIGNED_APPLY,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
import cityJson from "@/assets/json/city.json";
import { Popup, Picker } from "vant";
export default {
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker,
  },
  data() {
    return {
      form: {},
      cityJson,
      showDialog: false,
      seoInfo: {},
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
    };
  },
  watch: {
    $route: {
      handler: function (n) {
        // console.log(n);
        let form = this.$cookies.get("applyInfo");
        if (form) {
          this.$set(this, "form", form);
        }
        let query = n.query;
        if (query.city) {
          this.$set(this.form, "cityName", query.city);
          this.$set(this.form, "city", query.code);
          // console.log(this.form);
        }
      },
      immediate: true,
    },
  },
  async asyncData({ $axios }) {
    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 10, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};
    return { seoInfo };
  },
  created() {
  },
  methods: {
    // 页面跳转
    goPage(url) {
      let form = this.form;
      this.$cookies.set("applyInfo", form);
      this.$router.push({
        path: url,
      });
    },

    // 保存数据
    async applyEvent() {
      let _this = this;
      console.log(this.$cookies);
      let o = deepClone(this.form);
      if (!o.orgName) {
        showToast({
          message: "请输入机构名称",
        });
        return false;
      }
      if (!o.city) {
        showToast({
          message: "请选择所在城市",
        });
        return false;
      }
      if (!o.linkman) {
        showToast({
          message: "请输入联系人",
        });
        return false;
      }
      if (!o.position) {
        showToast({
          message: "请输入职位",
        });
        return false;
      }
      if (!o.phone) {
        showToast({
          message: "请输入您的手机号码",
        });
        return false;
      }
      if (!checkPhone(o.phone)) {
        showToast({
          message: "您的手机号码格式不正确",
        });
        return false;
      }
      o.platform = PLATFORM_TYPE;
      let res = await _this.$axios.post(ORGZASSIGNED_ASSIGNED_APPLY, o);
      if (res.code == 200) {
        showToast({
          message: "您已提交成功，我们会尽快与您联系",
          type: "success",
        });
        _this.$cookies.remove("applyInfo");
        _this.$router.push({
          path: "/home",
        });
      }
    },

    // 打开弹框
    openDialog() {
      this.showDialog = true;
    },

    // 保存城市数据
    onConfirm(e) {
      console.log(e);
      let list = this.cityJson;
      let o = list.find((k) => k.name == e[0]);
      let c = o.children.find((k) => k.name == e[1]);
      this.$set(this.form, "cityName", c.name);
      this.$set(this.form, "city", c.code);
      this.closeDialog();
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/my/join.less";
</style>
